{extend name="index/public" /}

{block name="content"}
<form class="layui-form" action="" onkeydown="if(event.keyCode==13)return false;" style="margin-bottom: 5px;">
    <div class="layui-inline">
        <input type="text" name="keys" id="keys" value="" id="keys" placeholder="请输入关键词" autocomplete="off" class="layui-input">
        <div id="keys_box" switch="off">
            {foreach $keys as $k=>$v}<a href="javascript:;" class="layui-btn layui-btn-sm keys_btn" value="{$v}">{$v}</a>{/foreach}
        </div>
    </div>
    <div class="layui-inline">
        <a href="javascript:;" class="layui-btn my-btn-sm searchBtn my-btn">搜索</a>
        <a href="javascript:;" class="layui-btn my-btn-sm my-btn" type="button" id="add">添加</a>
    </div>
</form>

<table class="layui-hidden" id="tableBox" lay-filter="tableBox" style=""></table>

<script type="text/html" id="tableBar">
    {{#  if(d.rid == 4){ }}
    <button class="layui-btn layui-btn-sm layui-btn-disabled" disabled lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-sm layui-btn-disabled" disabled lay-event="del">删除</button>
    {{#  } else { }}
    <a class="layui-btn layui-btn-green layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    {{#  } }}

</script>
{/block}

{block name="css"}
<style>
    #keys_box {display: none; width: 427px; height: 44px; background: #fff; border: 1px solid #D2D2D2; z-index: 999; position: absolute; left: 0; top: 42px; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box; padding: 5px; margin-right: -5px;}
    .keys_btn {background: #ccc;margin: 3px 5px 3px 0px;}
    .layui-table, .layui-table-view {margin-bottom:100px;}
</style>
{/block}

{block name="js"}
<script>

    layui.use(['element', 'layer', 'form', 'upload', 'treeGrid', 'table'], function () {
        var table = layui.table
            ,$ = layui.$
            ,load = null
            ,treeGrid = layui.treeGrid
            ,active = {
                reload: function () {
                    var jsonObj = {
                        "keys": $('#keys').val()
                    };
                    treeGrid.reload('tableBox', {
                        where: jsonObj
                    })
                },
            };

        var tableBox = treeGrid.render({
            elem: '#tableBox'
            ,url:'{:url("Faq/index")}'
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'pid'//树形父id字段名称
            ,treeShowName:'title'//以树形式显示的字段
            ,cols: [[
                {type:'checkbox'}
                ,{field:'title', width:'1200', title: '内容'}
                ,{title: '操作', align:'center', width: 150, toolbar:'#tableBar'}
            ]]
            ,page:false
            ,done: function (res, curr, count) {
                $('.rid').parent().parent().removeClass('layui-table-cell');
                $('.rid').parent().siblings().remove();
                $('#layui-loading').hide();
                layer.close(load);
            }
        });

        //点击游戏标签，出现标签选择
        $('#keys').click(function(){
            if( $("#keys_box").attr("switch") == "off" ){
                $("#keys_box").fadeIn(0);
                $("#keys_box").attr("switch","on");
            }else{
                $("#keys_box").fadeOut(0);
                $("#keys_box").attr("switch","off");
            }
        })

        //点击标签，加入样式
        $('.keys_btn').click(function(){
            $('#keys').val($(this).html());
            $(this).addClass('my-btn').siblings().removeClass('my-btn');
            $("#keys_box").fadeOut(0);
            $("#keys_box").attr("switch","off");
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        //点击文档，隐藏标签
        $(document).bind("click",function(e){
            var target  = $(e.target);
            if(target.closest("#keys_box,#keys").length == 0){
                $("#keys_box").fadeOut(0);
                $("#keys_box").attr("switch","off");
            };
            e.stopPropagation();
        });

        $('.searchBtn').on('click', function(){
            $("#keys_box").fadeOut(0);
            $("#keys_box").attr("switch","off");
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        $(document).keyup(function(event){
            if(event.keyCode == 13){
                $(".searchBtn").trigger("click");
                return false;
            }
        });

        $('#add').on('click', function(){
            layer.open({
                type: 2
                ,title: '添加'
                ,area: ['100%', '100%']
                ,content: '{:url("Faq/add")}'
            });
        })

        //监听工具条
        treeGrid.on('tool(tableBox)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: '编辑'
                    ,resize: true
                    ,area: ['100%', '100%']
                    ,content: '{:url("Faq/edit")}?id='+data.id
                    ,cancel: function(){
                        $.post('{:url("Faq/index")}',{id: data.id}, function(json){
                            if(json.data[0].rid==3){
                                $(obj.tr).find("td[data-field='title']").find('.box-html').html(json.data[0].title);

                                $.post('{:url("Faq/index")}',{pid: data.id}, function(json2){
                                    $(obj.tr).next().find("td[data-field='title']").find('.box-html').html(json2.data[0].title);
                                }, 'JSON');

                            }else{
                                $(obj.tr).find("td[data-field='title']").find('.box-html').html(json.data[0].title);
                            }
                        }, 'JSON').error(function(){
                            layer.close(load);
                            layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
                        });
                    }
                });
            }else if(obj.event === 'del'){
                layer.confirm('确定要删除吗？', {offset: '250px'}, function(index){
                    var load = layer.load();
                    $.post('{:url("Faq/del")}',{id: data.id, rid: data.rid}, function(json){
                        layer.close(load);
                        if(json.code==0){
                            $(obj.tr).next().remove();
                            obj.del();
                            layer.msg(json.msg, {icon: 1, time:1000})
                        }else{
                            layer.msg(json.msg, {icon: 0, time:1000});
                        }
                    }, 'JSON').error(function(){
                        layer.close(load);
                        layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
                    });
                });
            }
        });
    });
</script>
{/block}